<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        #n1{
            width: 100px;
            height: 100px;
            background-color: blue;
        }
        #n2{
            width: 150px;
            height: 150px;
            background-color: rgb(91, 187, 67);
        }
        #n3{
            width: 200px;
            height: 200px;
            background-color: rgb(255, 0, 119);
        }
        #n4{
            width: 250px;
            height: 250px;
            background-color: rgb(163, 187, 75);
        }
    </style>
</head>
<body>
    <div id='n4'>
        <div id='n3'>
            <div id='n2'>
                <div id='n1'></div>
            </div>
        </div>
    </div>
</body>
<script>
    document.querySelector("#n1")
        .addEventListener('click',function(e){
            console.log("n1被点击了");
        })
        document.querySelector("#n2")
        .addEventListener('click',function(e
            
       
        ){
            console.log("n2被点击了");
        })
        document.querySelector("#n3")
        .addEventListener('click',function(e){
            console.log("n3被点击了");
        })
        document.querySelector("#n4")
        .addEventListener('click',function(e){
            console.log("n4被点击了");
            //事件对象会冒泡传递给父元素
            //时间对象中 通过target属性纪录最开始事件源
            console.log(e.target);
        })
</script>
</html>